<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/page1.js"></script>

<link href='http://fonts.googleapis.com/css?family=Damion' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'>

<link href="css/page1.css" rel='stylesheet' type="text/css">
<link href="css/page2.css" rel='stylesheet' type="text/css">
<link href="css/page3.css" rel='stylesheet' type="text/css">
<style>
    
	body {
		margin: 0;
	}

	#bg {
		position: absolute;
		background-image: url("images/bg.jpg");
		z-index: -1;
	}
	
	#title {
		position: absolute;
		font-family: 'Microsoft YaHei';
		font-size: 80px;
		color: red;
		margin: 20% 0 0 25%;
		font-weight: bold;
	}
	
	#sign {
		position: absolute;
		font-family: 'Damion', cursive;
		font-size: 50px;
		color: red;
		margin: 28% 0 0 44%;
	}
	
</style>
</head>
<body onresize="reSize()">

	<div id="bg"></div>
	<div id="content">
		<div id="title">HTML5 & CSS3</div>
		<div id="sign">- by f -</div>
	</div>

</body>
<script type="text/javascript">

	isPageOver = true;
	var pageNum = 3;

	$(document).ready(function() {
		reSize();
	});
	
	function reSize() {
		$("#bg").width($(window).width());
		$("#bg").height($(window).height());
	}
	
	function keyDown(e) {
		var keyCode = e.which;
		if(keyCode == 13) {
			if(isPageOver) {
				$("#content").fadeTo("slow", 0, function() {
					$("#content").html("");
					var htmlObj = $.ajax({url:"page" + pageNum + ".html", async: false});
					$("#content").fadeTo("slow", 1, function() {
						$("#content").html(htmlObj.responseText);
					});
				});
			} else {
				page = new Page("page" + pageNum);
				page.animate();
			}
		}
	}
	document.onkeydown = keyDown;
</script>
</html>